<!-- 顶部搜索 -->
<template>
  <div class="search-outside">
    <el-input v-model="state.keyword" @change="updateValue" class="search-input" :prefix-icon="Search"
              :placeholder="props.placeholder"></el-input>
    <slot name="default">

    </slot>
    <div class="search-button-group">
      <el-button type="primary" class="search-button" @click="searchClick">搜索</el-button>
      <el-button class="search-button" @click="resetClick">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";

const props = defineProps({
  placeholder: {
    type: String,
    default: "请输入内容"
  }
})

const state = reactive({
  keyword: ""
})

const emits = defineEmits(["update:modelValue", "search", "reset"])

const updateValue = () => {
  emits("update:modelValue", state.keyword)
}

const searchClick = () => {
  emits("search")
}

const resetClick = () => {
  state.keyword = ""
  updateValue()
  emits("reset")
}

</script>

<style scoped>
.search-outside {
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;

  .search-input {
    width: 300px;
  }

  .search-button-group {
  }
}

</style>